<template>
  <div class="we_component we_form" :data-id="data.id">
    <div v-if="!data.id || !formDetail.content" class="noform">
      <i class="icon icon-biaodan"></i>
      <p>请选择表单</p>
    </div>
    <div v-else v-html="formDetail.content">
    </div>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    props: ['data'],
    mounted () {
      if (this.data.id) {
        this.getFormDetail2(this.data.id)
      }
    },
    watch: {
      'data.id': {
        handler: function (val) {
          if (val) {
            this.getFormDetail2(val)
          }
        }
      }
    },
    computed: {
      ...mapState({
        formDetail: state => state.contentManage.formDetail
      })
    },
    methods: {
      ...mapActions(['getFormDetail2'])
    }
  }
</script>
<style lang="scss">
  .we_form{
    .noform{padding-bottom:10px;text-align:center;line-height:1;color:#ccc;}
    .icon-biaodan{font-size:80px;color:#ccc;}
  }
</style>
